<template>
  <a-modal
    title="新增指标计算公式"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="函数名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入函数名称" v-decorator="['name', {rules: [{required: true, message: '请输入函数名称！'}]}]" />
        </a-form-item>
        <a-form-item
          label="函数描述信息"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input placeholder="请输入函数描述信息" v-decorator="['functionMsg', {rules: [{required: true, message: '请输入函数描述信息！'}]}]" />
        </a-form-item>
        <a-form-item
          label="函数计算公式图片地址"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <template>
            <!--            <a-upload list-type="picture-card" :customRequest="imgAdd" :remove="imgDel"-->
            <!--                      :file-list="fileList" @preview="handlePreview" @change="handleChange">-->
            <!--              <div v-if="fileList.length < 9">-->
            <!--                <a-icon type="plus" />-->
            <!--                <div class="ant-upload-text">-->
            <!--                  上传-->
            <!--                </div>-->
            <!--              </div>-->
            <!--            </a-upload>-->
            <a-input placeholder="请输入函数计算公式图片地址" v-decorator="['imageUrl', {rules: [{required: true, message: '请输入函数计算公式图片地址！'}]}]" />
            <a-upload
              :customRequest="customRequest"
              :multiple="false"
              :showUploadList="false"
              name="file"
            >
              <a-button> <a-icon type="upload" />上传文件</a-button>
            </a-upload>
          </template>
        </a-form-item>
        <a-form-item
          label="指标类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-tree-select
            v-decorator="['indexTypeId', {rules: [{required: true, message: '请选择指标类型！'}]}]"
            show-search
            :filterTreeNode="filterTreeNode"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            placeholder="请选择指标类型"
            :treeData="typeTreeData"
          >
          </a-tree-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { biIndexFunctionAdd } from '@/api/modular/main/biindexfunction/biIndexFunctionManage'
  import { sysFileInfoUpload } from '@/api/modular/system/fileManage'
  import { biIndexTypeSelectTree } from '@/api/modular/main/biindexdata/biIndexDataManage'
  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        // 指标类型list  (树)
        typeTreeData: [],
        form: this.$form.createForm(this)
      }
    },
    mounted() {
      this.loadSelectTree()
    },
    methods: {
      // 初始化方法
      add (record) {
        this.visible = true
      },
      // 上级父类选择器（tree）
      loadSelectTree() {
        biIndexTypeSelectTree({}).then((res) => {
          if (res.success) {
            this.typeTreeData = [
              {
                id: '-1',
                parentId: '0',
                title: '顶级',
                value: '0',
                pid: '0',
                children: res.data
              }
            ]
          }
        })
      },
      filterTreeNode(input, node) {
        return node.data.props.title.includes(input)
        // return node.title.indexOf(input) > -1
      },
      /**
       * 上传文件
       */
      customRequest (data) {
        const formData = new FormData()
        formData.append('file', data.file)
        sysFileInfoUpload(formData).then((res) => {
          if (res.success) {
            this.$message.success('上传成功')
            this.previewImage = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/preview?id=' + res.data
            this.form.setFieldsValue(
              {
                imageUrl: this.previewImage
              })
          } else {
            this.$message.error('上传失败：' + res.message)
          }
        })
      },
      /**
       * 提交表单
       */
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            for (const key in values) {
              if (typeof (values[key]) === 'object') {
                values[key] = JSON.stringify(values[key])
              }
            }
            biIndexFunctionAdd(values).then((res) => {
              if (res.success) {
                this.$message.success('新增成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error('新增失败')// + res.message
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
